<template>
  <div>
    <el-main>
      <h3>创建机构信息</h3>
      <div class="context">
        <span>基本信息</span><span>注：带有*为必填项</span>
      </div>
      <el-divider />
      <!-- =============== -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        require-asterisk-position="right"
      >
        <el-form-item label="机构名称" :rules="{ required: true }">
          <el-input
            class="input"
            v-model="formInline.user"
            placeholder="请输入'山东工业职业学院图书馆'或'闽南理工学院图书馆两种效果'"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- ===================== -->
    </el-main>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const formInline = reactive({
  user: "",
});
const onSubmit = () => {
  console.log("submit!");
};
</script>
<style lang='scss' scoped>
h3 {
  padding: 0;
  text-align: center;
}
.context {
  display: flex;
  justify-content: space-between;
}
.input {
  width: 500px;
}
</style>